import ContentItem from '@renderer/components/ContentItem'
import ContentSearch from '@renderer/components/ContentSearch'
import { Outlet, useLoaderData } from 'react-router-dom'
import styles from './styles.module.scss'
const ContentList = () => {
  const contents = useLoaderData() as ContentType[]

  return (
    <main className={styles.root}>
      <div className="list">
        <ContentSearch></ContentSearch>
        {contents.map((content) => (
          <ContentItem content={content} key={content.id}></ContentItem>
        ))}
      </div>
      <div className="content">
        <Outlet></Outlet>
      </div>
    </main>
  )
}

export default ContentList
